<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-02 13:41:06
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-23 17:09:35
 * @FilePath: /shortRent-ui/src/views/car/illegal/components/illegalDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-dialog title="详情" :visible.sync="visible" width="70%" @close="close">
      <div>
        <el-row>
          <el-col :span="24" :offset="0">
            <MmvTitle title="基础信息"></MmvTitle>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="6" :offset="0">工单号:{{ workerDetail.workOrderNo }}</el-col>
          <el-col :span="4" :offset="0">查询方式:{{ workerDetail.submitType | submitType }}</el-col>
          <el-col :span="4" :offset="0">查询车辆:{{ workerDetail.remark | filterNull }}</el-col>
          <el-col :span="4" :offset="0">提交人:{{ workerDetail.commitMan }}</el-col>
          <el-col :span="4" :offset="0">提交时间:{{ workerDetail.commitTime }}</el-col>
          <el-col :span="1" :offset="0">
            <div class="status" :class="{ active: workerDetail.processingStatus == 2 }">
              {{ workerDetail.processingStatus == 2 ? '已处理' : '未处理' }}
            </div>
          </el-col>
        </el-row>
        <!-- 车辆信息 -->
        <template>
          <el-row style="margin-top: 10px;">
            <el-col :span="24" :offset="0">
              <MmvTitle title="车辆信息"></MmvTitle>
            </el-col>
          </el-row>
          <el-table v-loading="loading" :data="list" border stripe
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
            <template slot="empty">
              <el-empty :image-size="50" description="暂无车辆信息"></el-empty>
            </template>
            <el-table-column type="index" align="center" label="序号" min-width="100">
            </el-table-column>
            <el-table-column prop="carNo" align="center" label="车牌号" width="150" min-width="100">
            </el-table-column>
            <el-table-column prop="vinNo" align="center" label="车架号" min-width="100">
            </el-table-column>
            <el-table-column prop="vinNo" align="center" label="车辆类型" min-width="100">
              <template v-slot="{ row }">
                {{ row.hpCode | hpCode }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="车辆所属公司" min-width="100">
              <template v-slot="{ row }">
                {{ row.orgInfo.name | filterNull }}
              </template>
            </el-table-column>
            <el-table-column prop="orgInfo" align="center" label="查询账号">
              <template v-slot="{row:{illegalQueryAccountList}}">
                {{illegalQueryAccountList.length?illegalQueryAccountList[0].account:''}}
              </template>
            </el-table-column>
            <el-table-column prop="orgInfo" align="center" label="查询平台">
              <template v-slot="{row:{illegalQueryAccountList}}">
                {{!illegalQueryAccountList.length?'':illegalQueryAccountList[0].platform|platform }}
              </template>
            </el-table-column>
<!--            <el-table-column label="账号信息" align="center" class-name="small-padding fixed-width" width="160">-->
<!--              <template v-slot="{ row }">-->
<!--                <el-popover placement="right" width="auto" trigger="click">-->
<!--                  <el-table :data="row.illegalQueryAccountList">-->
<!--                    <el-table-column width="100" prop="role" align="center" label="查询平台">-->
<!--                      <template v-slot="{ row }">-->
<!--                        {{ row.platform | platform }}-->
<!--                      </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column width="250" prop="account" align="center" label="查询账号"></el-table-column>-->
<!--                  </el-table>-->
<!--                  <el-button slot="reference" size="small" type="text">查看</el-button>-->
<!--                </el-popover>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column v-if="workerDetail.processingStatus == 2" prop="queryStatus" align="center" label="查询状态"
              min-width="100">
              <template slot-scope="{ row }">
                {{ row.queryStatus == 1 ? '已查询' : '待查询' }}
              </template>
            </el-table-column>
          </el-table>

          <pagination style="margin-top: 10px;" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </template>

        <!-- 违章结果 -->
        <template v-if="workerDetail.processingStatus == 2">
          <el-row style="margin-top: 20px;" type="flex" justify="space-between">
            <el-col :span="19" :offset="0">
              <MmvTitle title="违章结果"></MmvTitle>
            </el-col>
            <el-col :span="1" :offset="0">
              <div style="position: relative;">
                <el-button style="position: absolute;right: 0;" type="primary" size="default" :loading="exportLoading"
                  @click="handleExport">导出</el-button>
              </div>

            </el-col>
          </el-row>
          <el-table v-loading="loading2" :data="resultList" border stripe
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
            <template slot="empty">
              <el-empty :image-size="50" description="暂无违章结果信息"></el-empty>
            </template>
            <el-table-column type="index" align="center" label="序号" min-width="100">
            </el-table-column>
            <el-table-column prop="carNo" align="center" label="车牌号" min-width="100">
            </el-table-column>
            <el-table-column prop="vinNo" align="center" label="车架号" min-width="100">
            </el-table-column>
            <el-table-column prop="documentNo" align="center" label="违章单据号" min-width="100">
            </el-table-column>
            <el-table-column prop="illegalTime" align="center" label="违章时间" min-width="100">
            </el-table-column>
            <el-table-column prop="illegalLocation" align="center" label="违章地点" min-width="100">
            </el-table-column>
            <el-table-column prop="illegalDetail" align="center" label="违章事件" min-width="100">
            </el-table-column>
            <el-table-column prop="pointsDeduction" align="center" label="违章扣分" min-width="100">
            </el-table-column>
            <el-table-column prop="illegalFines" align="center" label="违章金额" min-width="100">
            </el-table-column>
            <el-table-column prop="processingStatus" align="center" label="处理状态" min-width="100">
              <template slot-scope="{ row }">
                {{
                  { 1: '未处理', 2: '已处理未缴费', 3: '已处理', 4: '已缴费未处理' }[
                  Number(row.processingStatus)
                  ]
                }}
              </template>
            </el-table-column>
            <el-table-column prop="queryAccount" align="center" label="查询账号" min-width="100">
            </el-table-column>
            <el-table-column prop="updateTime" align="center" label="查询时间" min-width="100">
            </el-table-column>

          </el-table>

          <pagination style="margin-top: 10px;" v-show="resultTotal > 0" :total="resultTotal"
            :page.sync="resultQueryParams.pageNum" :limit.sync="resultQueryParams.pageSize" @pagination="getResultList" />

          <el-row style="margin-top: 20px;">
            <el-col :span="24" :offset="0">
              <MmvTitle title="处理信息"></MmvTitle>
            </el-col>
          </el-row>

          <el-row style="margin-top: 10px;">
            处理时间:{{ workerDetail.processingTime }}
          </el-row>

        </template>


      </div>
      <span slot="footer">
        <el-button @click="close">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import * as api from '@/api/car/illegal';
export default {
  components: {
    MmvTitle
  },
  data() {
    return {
      loading: false,
      loading2: false,
      workId: '',
      visible: false,
      workerDetail: {},
      total: 0,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      resultTotal: 0,
      resultList: [],
      resultQueryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      exportLoading: false

    }
  },
  // props: {
  //   workId: {
  //     type: String,
  //     default: ''
  //   }
  // },
  created() {

  },
  methods: {
    // 获取工单详情
    getWorkDetail() {
      api.illegalWorkOrderDetail(this.workId).then(res => {
        this.workerDetail = res.data;
        if (this.workerDetail.processingStatus == 2) {//只有已处理才去查询违章结果
          this.getResultList();
        }
        this.getList();
      })
    },
    // 获取工单车辆列表
    getList() {
      this.loading = true;
      api.illegalWorkOrderCarList(this.workId, this.queryParams).then(res => {
        this.loading = false;
        this.list = res.rows;
        this.total = res.total;
      }).catch(() => {
        this.loading = false;
      })
    },
    // 获取工单查询结果列表
    getResultList() {
      this.loading2 = true;
      api.illegalWorkOrderResult(this.workId, this.resultQueryParams).then(res => {
        this.loading2 = false;
        this.resultList = res.rows;
        this.resultTotal = res.total;
      }).catch(() => {
        this.loading2 = false;
      })
    },
    // 导出
    handleExport() {
      if (this.resultList.length > 0) {
        this.$modal
          .confirm('是否确认导出违章结果项？')
          .then(() => {
            this.exportLoading = true
            return api.illegalWorkOrderResultExport(this.workId)
          })
          .then((response) => {
            this.$download.name(response.msg)
            this.exportLoading = false
          })
          .catch(() => { })
      } else {
        this.$message('数据为空无法导出');
      }
    },
    show(id) {
      this.workId = id;
      this.visible = true;
      this.getWorkDetail();
    },
    close() {
      this.visible = false;
    }
  },
}
</script>
<style lang="scss">
.status {
  position: relative;
  top: -20px;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid red;
  color: red;
  border-radius: 25px;

  &.active {
    border: 1px solid green;
    color: green;
  }
}
</style>
